<template>
  <div>
    <el-steps :active="step" finish-status="success" style="margin-bottom: 10px">
      <el-step :title="$t('user')+$t('name')" />
      <el-step title="认证途径" />
      <el-step title="安全验证" />
      <el-step title="成功重置" />
    </el-steps>
    <el-form v-if="step === 0">
      <el-form-item>
        <el-input v-model="userName" :placeholder="$t('user')+$t('name')" size="medium" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="getUserWithoutToken">{{ $t('next') }}</el-button>
      </el-form-item>
    </el-form>
    <div v-else-if="step === 1" style="margin-top: 50px">
      <div v-if="user.email" style="height: 60px">
        <div style="color: #5a5e66;font-size: 14px">{{ $t('email')+':'+ vagueString(user.email) }}</div>
        <el-button type="primary" style="float: right;margin-top: 10px" @click="typeOfEmail">{{ $t('next') }}
        </el-button>
      </div>
      <div v-if="user.phoneNumber && enablePhoneRegister" style="height: 60px;">
        <div style="color: #5a5e66;font-size: 14px">{{ $t('phone')+':'+ vagueString(user.phoneNumber) }}</div>
        <el-button type="primary" style="float: right;margin-top: 10px" @click="typeOfPhone">{{ $t('next') }}
        </el-button>
      </div>
    </div>
    <div v-else-if="step === 2">
      <div style="color: #c4c86b;margin-bottom: 8px;font-size: 14px">您正在对<span
        style="color: #34bfa3"
      >{{ userName }}</span>进行重置密码操作,请先进行安全验证
      </div>
      <div style="color: #c4c86b;margin-bottom: 8px;font-size: 14px">点击获取验证码，信息将发生到{{ $t(type) }}<span
        style="color: #34bfa3"
      >{{ number }}</span></div>
      <el-form inline>
        <el-form-item>
          <el-input v-model="safeCode" :placeholder="$t('verificationCode')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="canSend?'':'el-icon-loading'" :disabled="!canSend" @click="getSafeAuthCode">
            {{ authCodeTip }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item>
          <el-input v-model="password" :disabled="safeCode==''" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="safeCode==''"
            @click="resetPassword"
          >{{ $t('reset') + $t('password') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="step === 3">
      <el-tag type="success">成功重置{{ userName }}密码为{{ password }}</el-tag>
    </div>
  </div>
</template>

<script>
import {
  resetPassword,
  getSafeAuthCode,
  getUserWithoutToken
} from '@/api/auth/authUserApi'
import {
  getEnablePhoneRegister,
  getCompanyId
} from '@/util/storage'
import {
  successNotice
} from '@/util/common'

export default {
  name: 'ResetPassword',
  data() {
    return {
      enablePhoneRegister: getEnablePhoneRegister(),
      authCodeTip: null,
      canSend: true,
      step: 0,
      number: '',
      userName: '',
      user: null,
      type: null,
      safeCode: '',
      companyId: getCompanyId(),
      password: '123456'
    }
  },
  created() {
    this.authCodeTip = this.$t('verificationCode')
  },
  methods: {
    vagueString(str) {
      const start = str.length / 4
      let res = ''
      for (let i = 0, j = str.length; i < j; i++) {
        if (i >= start && i <= start + 6) {
          res = res + '*'
        } else {
          res = res + str[i]
        }
      }
      return res
    },
    typeOfEmail() {
      this.type = 'email'
      this.number = this.user.email
      this.step = 2
    },
    typeOfPhone() {
      this.type = 'phone'
      this.number = this.user.phoneNumber
      this.step = 2
    },
    getSafeAuthCode() {
      getSafeAuthCode({
        type: this.type,
        companyId: this.companyId,
        userId: this.user.userId
      }).then(res => {
        const { code } = res
        const that = this
        if (code === '200') {
          this.canSend = false
          let count = 20
          setInterval(() => {
            count = count - 1
            that.authCodeTip = count + 's'
            if (count < 0) {
              that.authCodeTip = that.$t('verificationCode')
              that.canSend = true
            }
          }, 1000)
        }
      })
    },
    resetPassword() {
      resetPassword({
        safeCode: this.safeCode,
        userId: this.user.userId,
        password: this.password
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.step = 3
          successNotice(this)
        }
      })
    },
    getUserWithoutToken() {
      getUserWithoutToken({
        userName: this.userName
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.user = data
          this.step = 1
        }
      })
    }
  }
}
</script>


